<template>
  <div class="my-card-box" @click="close">
    <div class="my-card" @click="stop">
      <div class="card-head" @click="checkInfo">矩阵指标</div>

      <div class="card-body">
        <div class="tag-item" v-for="(item, index) in list" :key="index">
          <div class="tag-title">{{ item.label }}</div>
          <div class="tag-right">
            <div
              class="tag-select-item"
              v-for="(items, index) in item.children"
              :key="index"
            >
              <div
                class="tag-name"
                :class="{ 'tag-has': items.value.length > 0 }"
              >
                {{ items.label
                }}{{
                  items.value.length > 0 ? "（" + items.value.length + "）" : ""
                }}
              </div>
              <el-select
                v-model="items.value"
                multiple
                collapse-tags
                style="width: 198px"
                placeholder=""
                @change="onChange"
              >
                <el-option
                  v-for="itemMi in items.children"
                  :key="itemMi.value"
                  :label="itemMi.label"
                  :value="itemMi.value"
                  :disabled="itemMi.disabled"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="tag-bo">
          <div class="tag-bo-left">已选</div>
          <div class="tag-bo-right">
            <div
              class="tag-bo-item"
              v-for="(item, index) in hasSelectList"
              :key="index"
            >
              <div>{{ item.name }}</div>
              <img
                src="~img/tag-close.png"
                alt=""
                style="cursor: pointer"
                @click="clearOne(item.key)"
              />
            </div>
          </div>
        </div>
        <div class="tag-btn" @click="confirm">确定</div>
        <!-- <div class="line-ge"></div> -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      active: 1,
      value2: [],
      hasSelectCol: [],
      hasList: [],
      list: [
        {
          label: "产业经营",
          value: "",
          children: [
            {
              label: "产业产值",
              value: "",
              children: [
                {
                  value: "zyywsr",
                  label: "主营业务收入",
                  disabled: false,
                },
                {
                  value: "cysczz",
                  label: "产业生产总值",
                  disabled: false,
                },
                {
                  value: "zyywlrl",
                  label: "主营业务利润率",
                  disabled: false,
                },
                {
                  value: "cysczzRatio",
                  label: "产业增加值",
                  disabled: false,
                },
                // {
                //   value: "产业收入与经济增长同步率",
                //   label: "产业收入与经济增长同步率",
                //   disabled: false,
                // },
              ],
            },
            {
              label: "产业结构",
              value: "",
              children: [
                {
                  value: "qyszb",
                  label: "企业数量占比",
                  disabled: false,
                },
                {
                  value: "jckqyzb",
                  label: "进出口企业占比",
                  disabled: false,
                },
                {
                  value: "nyscbwqyzb",
                  label: "年营收超百万企业占比",
                  disabled: false,
                },
                {
                  value: "zczbcwqyzb",
                  label: "注册资本超百万企业占比",
                  disabled: false,
                },
                {
                  value: "sbrscbrzb",
                  label: "用工人数超百人企业占比",
                  disabled: false,
                },
              ],
            },
            {
              label: "产业规模",
              value: "",
              children: [
                {
                  value: "qys",
                  label: "产业企业总数",
                  disabled: false,
                },
                {
                  value: "cyqyslqszlzb",
                  label: "产业企业数量与全市总量占比",
                  disabled: false,
                },
                {
                  value: "nsjeqszlzb",
                  label: "纳税金额与全市总量占比",
                  disabled: false,
                },
                {
                  value: "sbrsqszlzb",
                  label: "社保人数与全市总量占比",
                  disabled: false,
                },
                {
                  value: "gjjrsqszlzb",
                  label: "公积金人数与全市总量占比",
                  disabled: false,
                },
                {
                  value: "rzjeqszlzb",
                  label: "融资金额与全市总量占比",
                  disabled: false,
                },
              ],
            },
            {
              label: "产业标签",
              value: "",
              children: [
                {
                  value: "dxRatio",
                  label: "大型企业占比",
                  disabled: false,
                },
                {
                  value: "zxRatio",
                  label: "中型企业占比",
                  disabled: false,
                },
                {
                  value: "xwRatio",
                  label: "小微企业占比",
                  disabled: false,
                },
                // {
                //   value: "高新技术企业占比",
                //   label: "高新技术企业占比",
                //   disabled: false,
                // },
                // {
                //   value: "科技型中小企业占比",
                //   label: "科技型中小企业占比",
                //   disabled: false,
                // },
                // {
                //   value: "专精特新企业占比",
                //   label: "专精特新企业占比",
                //   disabled: false,
                // },
              ],
            },
            {
              label: "经营能力",
              value: "",
              children: [
                // {
                //   value: "产业平均利润率",
                //   label: "产业平均利润率",
                //   disabled: false,
                // },
                // {
                //   value: "产业总利润额",
                //   label: "产业总利润额",
                //   disabled: false,
                // },
                {
                  value: "taxAmount",
                  label: "产业纳税金额",
                  disabled: false,
                },
                {
                  value: "fzl",
                  label: "平均资产负债率",
                  disabled: false,
                },
                {
                  value: "jzcsyl",
                  label: "平均净资产收益率",
                  disabled: false,
                },
              ],
            },
            {
              label: "技术创新",
              value: "",
              children: [
                {
                  value: "isZl",
                  label: "获得专利企业数量",
                  disabled: false,
                },
                {
                  value: "zlsjzzl",
                  label: "专利数量增长率",
                  disabled: false,
                },
                // {
                //   value: "资质认证新增数量",
                //   label: "资质认证新增数量",
                //   disabled: false,
                // },
                {
                  value: "rjzlsl",
                  label: "人均专利数量",
                  disabled: false,
                },
                // {
                //   value: "发明专利与实用新型外观设计数量占比",
                //   label: "发明专利与实用新型外观设计数量占比",
                //   disabled: false,
                // },
              ],
            },
            {
              label: "业务扩张",
              value: "",
              children: [
                // {
                //   value: "外地新设分支机构企业数量",
                //   label: "外地新设分支机构企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "外地设立全资子公司数量",
                //   label: "外地设立全资子公司数量",
                //   disabled: false,
                // },
                // {
                //   value: "5个城市以上存在招聘岗位的企业数量",
                //   label: "5个城市以上存在招聘岗位的企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "跨城市招聘的企业数量",
                //   label: "跨城市招聘的企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "在招职位大于30人的企业数量",
                //   label: "在招职位大于30人的企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "用工人数增长率超50%的企业数量",
                //   label: "用工人数增长率超50%的企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "营业收入增长率超100%的企业数量",
                //   label: "营业收入增长率超100%的企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "新增对外投资企业数量",
                //   label: "新增对外投资企业数量",
                //   disabled: false,
                // },
                {
                  value: "ztbqysl",
                  label: "存在招投标项目企业数量",
                  disabled: false,
                },
              ],
            },
          ],
        },
        {
          label: "产业用工",
          value: "",
          children: [
            {
              label: "用工规模",
              value: "",
              children: [
                {
                  value: "用工人数增长率",
                  label: "用工人数增长率",
                  disabled: false,
                },
                {
                  value: "用工人数占比",
                  label: "用工人数占比",
                  disabled: false,
                },
                {
                  value: "sbPersonCount",
                  label: "社保参保总人数",
                  disabled: false,
                },
                {
                  value: "gjjPersonCount",
                  label: "公积金人数总人数",
                  disabled: false,
                },
                // {
                //   value: "社保人数超百人企业占比",
                //   label: "社保人数超百人企业占比",
                //   disabled: false,
                // },
              ],
            },
            {
              label: "用工成效",
              value: "",
              children: [
                {
                  value: "sbgjjglfyzb",
                  label: "社保公积金金额管理费用占比",
                  disabled: false,
                },
                // {
                //   value: "人均纳税额",
                //   label: "人均纳税额",
                //   disabled: false,
                // },
                // {
                //   value: "人均营业收入额",
                //   label: "人均营业收入额",
                //   disabled: false,
                // },
                // {
                //   value: "人均利润额",
                //   label: "人均利润额",
                //   disabled: false,
                // },
              ],
            },
          ],
        },
        // {
        //   label: "产业投资",
        //   value: "",
        //   children: [
        //     {
        //       label: "产业投资",
        //       value: "",
        //       children: [
        //         {
        //           value: "产业更新替代率",
        //           label: "产业更新替代率",
        //           disabled: false,
        //         },
        //         {
        //           value: "产业新设企业数",
        //           label: "产业新设企业数",
        //           disabled: false,
        //         },
        //         {
        //           value: "新设企业注册资本、实缴资本额占比",
        //           label: "新设企业注册资本、实缴资本额占比",
        //           disabled: false,
        //         },
        //         {
        //           value: "新设企业注册资本本额",
        //           label: "新设企业注册资本本额",
        //           disabled: false,
        //         },
        //         {
        //           value: "新设企业实缴资本额",
        //           label: "新设企业实缴资本额",
        //           disabled: false,
        //         },
        //         {
        //           value: "户均注册资本额",
        //           label: "户均注册资本额",
        //           disabled: false,
        //         },
        //       ],
        //     },
        //   ],
        // },
        {
          label: "产业融资",
          value: "",
          children: [
            {
              label: "产业融资",
              value: "",
              children: [
                {
                  value: "信贷覆盖率",
                  label: "信贷覆盖率",
                  disabled: false,
                },
                {
                  value: "信用贷款与贷款总金额占比",
                  label: "信用贷款与贷款总金额占比",
                  disabled: false,
                },
                {
                  value: "新增融资企业占比",
                  label: "新增融资企业占比",
                  disabled: false,
                },
                {
                  value: "贷款融资余额",
                  label: "贷款融资余额",
                  disabled: false,
                },
                {
                  value: "comDiscount",
                  label: "商业汇票贴现总金额",
                  disabled: false,
                },
                {
                  value: "bankDiscount",
                  label: "银行汇票贴现总金额",
                  disabled: false,
                },
                // {
                //   value: "贷款企业户数增长率",
                //   label: "贷款企业户数增长率",
                //   disabled: false,
                // },
                // {
                //   value: "贷款金额增长率",
                //   label: "贷款金额增长率",
                //   disabled: false,
                // },
                {
                  value: "ipoqy",
                  label: "IPO企业占比",
                  disabled: false,
                },
              ],
            },
          ],
        },
        {
          label: "产业风险",
          value: "",
          children: [
            {
              label: "处罚风险",
              value: "",
              children: [
                {
                  value: "adPunish",
                  label: "产业当年行政处罚总次数",
                  disabled: false,
                },
                {
                  value: "isPunish",
                  label: "产业行政处罚企业数量",
                  disabled: false,
                },
                // {
                //   value: "产业当月新增行政处罚次数",
                //   label: "产业当月新增行政处罚次数",
                //   disabled: false,
                // },
              ],
            },
            {
              label: "融资风险",
              value: "",
              children: [
                // {
                //   value: "产业贷款不良率",
                //   label: "产业贷款不良率",
                //   disabled: false,
                // },
                {
                  value: "gqzyqy",
                  label: "股权质押企业数量",
                  disabled: false,
                },
                {
                  value: "isPledge",
                  label: "不动产抵押企业数量",
                  disabled: false,
                },
                {
                  value: "isClose",
                  label: "不动产查封企业数量",
                  disabled: false,
                },
                // {
                //   value: "产业小额贷款总金额",
                //   label: "产业小额贷款总金额",
                //   disabled: false,
                // },
                // {
                //   value: "产业小额贷款企业数量",
                //   label: "产业小额贷款企业数量",
                //   disabled: false,
                // },
                // {
                //   value: "小额贷款与融资总额占比",
                //   label: "小额贷款与融资总额占比",
                //   disabled: false,
                // },
                {
                  value: "zzssqy",
                  label: "A股、科创板终止上市企业数量",
                  disabled: false,
                },
              ],
            },
            {
              label: "涉诉风险",
              value: "",
              children: [
                {
                  value: "isLawsuit",
                  label: "当年企业涉诉数量",
                  disabled: false,
                },
                {
                  value: "cntDishonest",
                  label: "当年失信被执行企业数量",
                  disabled: false,
                },
              ],
            },
            {
              label: "经营风险",
              value: "",
              children: [
                {
                  value: "cyysyc",
                  label: "营收异常企业数量",
                  disabled: false,
                },
                {
                  value: "jcyjqysl",
                  label: "减产预警企业数量",
                  disabled: false,
                },
                {
                  value: "isWriteOffRevore",
                  label: "当年注销吊销企业数量",
                  disabled: false,
                },
                {
                  value: "pcqy",
                  label: "当年破产企业数量",
                  disabled: false,
                },
              ],
            },
          ],
        },
        {
          label: "产业支持",
          value: "",
          children: [
            {
              label: "政策扶持",
              value: "",
              children: [
                {
                  value: "zffchtlqy",
                  label: "政府扶持和奖励企业数量",
                  disabled: false,
                },
                {
                  value: "hdxmjlqy",
                  label: "获得项目奖励企业数量",
                  disabled: false,
                },
                {
                  value: "hdzfbtqy",
                  label: "获得政府补贴企业数量",
                  disabled: false,
                },
                {
                  value: "hdjsmsqy",
                  label: "获得减税免税企业数量",
                  disabled: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    hasSelectList() {
      let needList = [];
      let hasSelectCol = [];

      this.list.forEach((val) => {
        val.children.forEach((pre) => {
          pre.children
            .filter((k) => pre.value.indexOf(k.value) > -1)
            .forEach((item) => {
              needList.push(item.label);
              let para = {};
              para.name = item.label;
              para.key = item.value;
              hasSelectCol.push(para);
            });
        });
      });
      this.hasSelectCol = hasSelectCol;
      console.log(this.hasSelectCol, "返回的值");

      return hasSelectCol;
    },
  },
  mounted() {
    // this.list = [{ "title": "产业经营", "value": "", "children": [{ "title": "产业产值", "value": ["选项101", "选项102", "选项103"], "children": [{ "value": "选项101", "label": "黄金糕101" }, { "value": "选项102", "label": "双皮奶102" }, { "value": "选项103", "label": "蚵仔煎103" }] }, { "title": "产业用工", "value": ["选项104", "选项105"], "children": [{ "value": "选项104", "label": "龙须面104" }, { "value": "选项105", "label": "北京烤鸭105" }] }] }, { "title": "产业用工", "value": "", "children": [{ "title": "产业产值", "value": ["选项3", "选项2", "选项1"], "children": [{ "value": "选项1", "label": "黄金糕" }, { "value": "选项2", "label": "双皮奶" }, { "value": "选项3", "label": "蚵仔煎" }] }, { "title": "产业结构", "value": [], "children": [{ "value": "选项4", "label": "龙须面" }, { "value": "选项5", "label": "北京烤鸭" }] }, { "title": "产业规模", "value": ["选项6", "选项7"], "children": [{ "value": "选项6", "label": "龙须面" }, { "value": "选项7", "label": "北京烤鸭" }] }, { "title": "产业标签", "value": ["选项8", "选项9"], "children": [{ "value": "选项8", "label": "龙须面" }, { "value": "选项9", "label": "北京烤鸭" }] }, { "title": "经营能力", "value": ["选项11", "选项10"], "children": [{ "value": "选项10", "label": "龙须面" }, { "value": "选项11", "label": "北京烤鸭" }] }] }]

    this.initInfo();
  },
  methods: {
    confirm() {
      let hasSelectCol = this.hasSelectCol;
      console.log(this.list, "list");
      this.$emit("changeCole", hasSelectCol, this.list);
    },
    initInfo() {},

    close() {
      this.$parent.showTag = false;
    },
    stop(e) {
      e.stopPropagation(); // 阻止事件冒泡即可
    },
    change(index) {
      this.active = index;
      this.$nextTick(() => {
        this.init_1();
      });
    },
    checkInfo() {
      console.log(JSON.stringify(this.list), "list");
    },

    clearOne(item) {
      this.removeFromTree(this.list, item);
      this.onChange();
    },
    removeFromTree(tree, valueToRemove) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        // 如果当前节点的 value 是一个数组，并且包含要删除的值，则从数组中移除该值
        if (Array.isArray(node.value)) {
          node.value = node.value.filter((value) => value !== valueToRemove);
        }
        // 递归调用 removeFromTree 函数处理当前节点的子节点
        if (Array.isArray(node.children)) {
          node.children = this.removeFromTree(node.children, valueToRemove);
        }
      }
      return tree.filter((node) => {
        return (
          node.value.length > 0 ||
          (Array.isArray(node.children) && node.children.length > 0)
        );
      });
    },
    onChange() {
      let needList = [];
      this.list.forEach((val) => {
        val.children.forEach((pre) => {
          needList.push(...pre.value);
        });
      });
      if (needList.length > 8) {
        this.list.forEach((pre) => {
          pre.children.forEach((val) => {
            val.children.forEach((per) => {
              if (val.value) {
                if (val.value.includes(per.value)) {
                  per.disabled = false;
                } else {
                  per.disabled = true;
                }
              }
            });
          });
        });
        this.$message.error("最多选择9个标签");
      } else {
        this.list.forEach((pre) => {
          pre.children.forEach((val) => {
            val.children.forEach((per) => {
              per.disabled = false;
            });
          });
        });
      }
    },
    defaultCheck(val) {
      if(val){
  console.log(val, "到这里楼");
      this.list = val;
      }

      // console.log(this.hasSelectList, "发生改变了");
      // this.onChange();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-card-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  .my-card {
    position: relative;
    width: 1128px;
    height: 826px;
    margin: 60px auto 0;
    // border: 1px solid red;

    .card-head {
      background-image: url(~img/card_header.png);
      background-repeat: no-repeat;
      background-size: cover;
      width: 382px;
      height: 45px;
      margin: 0 auto;
      position: relative;
      top: 20px;
      color: #d7f4ff;
      font-size: 22px;
      font-family: YouSheBiaoTiHei;
      text-align: center;
      line-height: 50px;
      z-index: 100;
    }

    .card-body {
      // background: rgba(2, 47, 131, 0.95);
      height: 100%;
      box-shadow: 1px 1px 20px 3px rgba(0, 100, 199, 0.6) inset,
        -1px -1px 20px 3px rgba(0, 100, 199, 0.6) inset;
      background: #0c276a;
      opacity: 0.96;
      padding: 30px;
      padding-top: 30px;
      // border: 1px solid red;

      .tag-item {
        // margin: 20px;
        padding: 8px;
        display: flex;
        // height: 40px;
        border-bottom: 1px solid rgba(14, 64, 147, 1);
        // align-items: center;

        .tag-title {
          font-size: 22px;
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: #ceecff;
          flex-shrink: 0;
          margin-right: 30px;
          margin-top: 10px;
        }

        .tag-right {
          display: flex;
          flex-wrap: wrap;
        }

        .tag-select-item {
          position: relative;
          margin: 8px;

          .tag-name {
            width: 198px;
            position: absolute;
            // top: 50%;
            // transform: translateY(-50%);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            // border-radius: 18px;
            // left: 14px;
            font-size: 16px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #6ed4fa;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            padding-left: 20px;

            &.tag-has {
              color: #fff;
              background: rgba(0, 115, 235, 1);
            }
          }
        }
      }

      .tag-bo-item {
        position: relative;
        width: 268px;
        height: 38px;
        border: 1px solid #15adf2;
        background: rgba(15, 75, 164, 1);
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #6ed4fa;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        > div {
          height: 38px;
          line-height: 38px;
        }

        img {
          position: absolute;
          right: 10px;
          width: 20px;
          height: 20px;
          cursor: pointer;
          // margin-left: auto;
        }

        // background-image: url('~img/tag-select.png');
      }

      // .line-ge {
      //   width: 100%;
      //   height: 1px;
      //   background: red;
      // }
    }
  }

  .tag-bo {
    position: absolute;
    bottom: -40px;
    left: 20px;
    right: 20px;
    // height: 267px;
    background: #163581;
    border: 1px solid #1f71e0;
    box-shadow: 0px 1px 8px 1px rgba(0, 3, 39, 0.48);
    opacity: 0.96;
    display: flex;
    padding: 40px;
    align-items: center;
    padding-bottom: 70px;

    .tag-bo-left {
      font-size: 22px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      color: #ceecff;
      margin-right: 60px;
      flex-shrink: 0;
    }

    .tag-bo-right {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .tag-btn {
    cursor: pointer;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    right: 20px;
    width: 217px;
    height: 44px;
    background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
    border-radius: 6px 6px 6px 6px;
    font-size: 20px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #d7f4ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep .el-icon-close {
    display: none;
  }

  ::v-deep .el-tag {
    display: none;
  }

  ::v-deep .el-input__inner {
    background-color: transparent !important;
    border-color: rgba(5, 176, 245, 1);
    border-radius: 0;
  }
}
</style>
